window.addEventListener("load", function () {
  //   1.获取元素
  let arrow_l = document.querySelector(".arrow-l");
  let arrow_r = document.querySelector(".arrow-r");
  let focus = document.querySelector(".focus");
  let focusWidth = focus.offsetWidth;
  // 2.鼠标经过就显示隐藏
  focus.addEventListener("mouseenter", function () {
    arrow_l.style.display = "block";
    arrow_r.style.display = "block";
    // 鼠标经过就清除定时器;
    clearInterval(timer);
    timer = null; //清除定时器变量
  });
  // 鼠标离开就隐藏
  focus.addEventListener("mouseleave", function () {
    arrow_l.style.display = "none";
    arrow_r.style.display = "none";
    //   鼠标离开就开启定时器
    timer = setInterval(function () {
      //   手动调用点击事件
      arrow_r.click();
    }, 2000);
  });
  // 3.动态生成小圆点 有几张图片生成几个小圆点
  let ul = focus.querySelector("ul");
  let ol = focus.querySelector(".cricle");
  for (let i = 0; i < ul.children.length; i++) {
    //创建一个小li
    let li = document.createElement("li");
    //记录当前小圆圈的索引号 通过自定义属性的到
    li.setAttribute("index", i);
    //把小li插入到ol里面
    ol.appendChild(li);
    //   小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
    li.addEventListener("click", function () {
      //干掉所有人 把所有小li 清除 current类名
      for (let i = 0; i < ol.children.length; i++) {
        ol.children[i].className = "";
      }
      //留下我自己  当前的小li 设置current 类名
      this.className = "current";
      // 5.点击小圆圈，移动图片 当然移动的是ul
      // ul的移动距离就是 小圆圈的所有号 乘以图片的宽度 注意是负值
      //   当我们点击了某个小li就拿到当前小li的索引号
      let index = this.getAttribute("index");
      //当我们点击了某个小li 就要把这个小li给num
      num = index;
      //当我们点击了某个小li 就要把这个小li给circle
      circle = index;
      animate(ul, -index * focusWidth);
    });
  }
  //把ol里面的第一个小li设置类名为 current
  ol.children[0].className = "current";
  //克隆第一张图片放在ul最后面
  let frist = ul.children[0].cloneNode(true);
  ul.appendChild(frist);
  //点击右侧按钮  图片滚动一张
  let num = 0;
  // circle 控制小圆圈播放
  let circle = 0;
  arrow_r.addEventListener("click", function () {
    //   如果走到了最后复制的一张，此时我们的ul要快速的复原
    if (num == ul.children.length - 1) {
      ul.style.left = 0;
      num = 0;
    }
    num++;
    animate(ul, -num * focusWidth);
    circle++;
    //如果circle ==4 说明走到克隆的图片了
    if (circle == ol.children.length) {
      circle = 0;
    }
    circleChange();
  });

  //   左侧按钮做法;
  arrow_l.addEventListener("click", function () {
    //   如果走到了最后复制的一张，此时我们的ul要快速的复原
    if (num == 0) {
      num = ul.children.length - 1;
      ul.style.left = -num * focusWidth + "px";
    }
    num--;
    animate(ul, -num * focusWidth);
    circle--;
    //如果circle ==4 说明走到克隆的图片了
    if (circle < 0) {
      circle = ol.children.length - 1;
    }
    circleChange();
  });
  function circleChange() {
    //先清除其余小圆圈的circle类名
    for (let i = 0; i < ol.children.length; i++) {
      ol.children[i].className = "";
    }
    //留下当前小圆圈的circle类名
    ol.children[circle].className = "current";
  }

  // 自动播放lunbotu
  let timer = this.setInterval(function () {
    //   手动调用点击事件
    arrow_r.click();
  }, 2000);
});
